import React, { useRef } from 'react';
import Difference from '@/pages/WorkFlow/components/FormControls/components/Difference';
import { Table, Popover, Typography, Tooltip } from 'antd';
import { size } from 'lodash';
import { createDictionary } from '@/dictionary';
import LabelValue from '../LabelValue';
import styles from './index.less';

const { Paragraph } = Typography;
const [, getOrgOptionText] = createDictionary('PRIVILEGE_TEMPLATE_ORG_SCOPE');
const [, getCompanyOptionText] = createDictionary('PRIVILEGE_TEMPLATE_COMPANY_SCOPE');

const compareDataScopeSetType = {
    0: '全局统一',
    1: '模块控制'
};

// 数据权限
const AuthorityData = ({ dataScopeSetType, authorityDataList, compareDataMap = {} }) => {
    const authorityDataRef = useRef();

    const columns = [
        {
            title: '功能模块',
            dataIndex: 'resourceModuleNameZh',
            width: 150,
            render: text => (
                <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
                    <Tooltip title={text}>{text}</Tooltip>
                </Paragraph>
            )
        },
        {
            title: '介绍',
            dataIndex: 'resourceModuleRemarkZh',
            width: 250,
            render: text => (
                <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
                    <Tooltip title={text}>{text}</Tooltip>
                </Paragraph>
            )
        },
        {
            title: '组织架构权限',
            dataIndex: 'orgList',
            width: 220,
            render: (text, record) => (
                <>
                    <div>{getOrgOptionText(record?.organizationalScope)}</div>
                    {size(text) > 0 && (
                        <Paragraph ellipsis={{ rows: 3, expandable: true }}>
                            <div>
                                {size(text) > 0 &&
                                    text.map((item, index) => (
                                        <span key={item?.orgCode} style={{ marginRight: 5 }}>
                                            <Tooltip title={item?.orgFullName}>{item?.orgName}</Tooltip>
                                            {size(text) !== index + 1 && '、'}
                                        </span>
                                    ))}
                            </div>
                        </Paragraph>
                    )}
                </>
            )
        },
        {
            title: '行政架构权限',
            dataIndex: 'companyList',
            width: 220,
            render: (text, record) => (
                <>
                    <div>{getCompanyOptionText(record?.administrativeScope)}</div>
                    {size(text) > 0 && (
                        <Paragraph ellipsis={{ rows: 3, expandable: true }}>
                            <div>
                                {size(text) > 0 &&
                                    text.map((item, index) => (
                                        <span key={item?.companyCode} style={{ marginRight: 5 }}>
                                            <Tooltip title={item?.companyFullName}>{item?.companyName}</Tooltip>
                                            {size(text) !== index + 1 && '、'}
                                        </span>
                                    ))}
                            </div>
                        </Paragraph>
                    )}
                </>
            )
        }
    ];

    const renderDataInfo = (type, dataList, isPop = false) => {
        // 全局统一的数据，后端是说拿数组第一项
        const globalDataScopeSetType = size(dataList) > 0 ? dataList[0] : {};
        if (type === 0) {
            // 全局统一
            return (
                <>
                    <div>
                        <LabelValue
                            labelInline
                            label="组织架构权限"
                            grid={!isPop}
                            value={getOrgOptionText(globalDataScopeSetType?.organizationalScope)}
                        />
                        <div style={{ margin: '0 0 18px 135px ', color: 'rgba(0, 0, 0, 0.85)' }}>
                            {size(globalDataScopeSetType.orgList) > 0 &&
                                globalDataScopeSetType.orgList.map((item, index) => (
                                    <span key={item?.orgCode} style={{ marginRight: 5 }}>
                                        <Tooltip title={item?.orgFullName}>{item?.orgName}</Tooltip>
                                        {size(globalDataScopeSetType.orgList) !== index + 1 && '、'}
                                    </span>
                                ))}
                        </div>
                    </div>
                    <div>
                        <LabelValue
                            labelInline
                            label="行政架构权限"
                            grid={!isPop}
                            value={getCompanyOptionText(globalDataScopeSetType?.administrativeScope)}
                        />
                        <div style={{ margin: '0 0 18px 135px ', color: 'rgba(0, 0, 0, 0.85)' }}>
                            {size(globalDataScopeSetType.companyList) > 0 &&
                                globalDataScopeSetType.companyList.map((item, index) => (
                                    <span key={item?.companyCode} style={{ marginRight: 5 }}>
                                        <Tooltip title={item?.companyFullName}>{item?.companyName}</Tooltip>
                                        {size(globalDataScopeSetType.companyList) !== index + 1 && '、'}
                                    </span>
                                ))}
                        </div>
                    </div>
                </>
            );
        }
        if (type === 1) {
            // 模块控制
            return (
                <Table
                    style={{ marginTop: 26 }}
                    dataSource={dataList}
                    columns={columns}
                    pagination={false}
                    rowKey="resourceModuleCode"
                />
            );
        }
        return null;
    };

    const getDataScopeSetType = () =>
        compareDataMap?.dataScopeSetType !== undefined ? compareDataMap?.dataScopeSetType : dataScopeSetType;

    return (
        <div>
            <LabelValue
                labelAlignItems="center"
                label="数据权限"
                grid={false}
                labelInline={dataScopeSetType === 1}
                labelStyles={{ ...(dataScopeSetType === 1 ? { marginLeft: 16 } : '') }}
                value={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <Difference
                            className={styles.differenceText}
                            tip={compareDataScopeSetType[compareDataMap?.dataScopeSetType]}
                            diffWrapStyle={{ width: 130 }}
                        >
                            <div>
                                {dataScopeSetType === 0 && '全局统一'}
                                {dataScopeSetType === 1 && '模块控制'}
                            </div>
                        </Difference>
                        {/* 如果内容有变更显示变更之前的整体内容，不做更详细的差异化！！ */}
                        {size(compareDataMap?.authorityDataList) > 0 && (
                            <Popover
                                content={renderDataInfo(getDataScopeSetType(), compareDataMap?.authorityDataList, true)}
                                title="变更前的数据"
                                arrowPointAtCenter
                                trigger="click"
                                align={{ targetOffset: ['0%', 0] }}
                                placement={getDataScopeSetType() === 0 ? 'rightBottom' : 'topLeft'}
                                overlayClassName={
                                    getDataScopeSetType() === 0
                                        ? styles.authorityDataPopover
                                        : styles.authorityDataTablePopover
                                }
                                getPopupContainer={() => authorityDataRef.current}
                            >
                                <span className={styles.showCompareBtn} ref={authorityDataRef}>
                                    变更前的数据
                                </span>
                            </Popover>
                        )}
                    </div>
                }
            />
            {renderDataInfo(dataScopeSetType, authorityDataList)}
        </div>
    );
};

export default AuthorityData;
